<template>
    <div class="container mx-auto p-4">
        <div class = "bg-while rounded-lg shadow-md p-8 mt-8">
            <h1 class = "text-3xl font-bold mb-4 ">
                {{ post.title }}
            </h1>
            <div class="text-gray-500 mb-4">
                <p v-html="post.category"></p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted,ref } from 'vue'
import { useRoute } from "vue-router";
import { getPostsById,getRecommendPosts } from '../api/index'
// 当前路由对象 hooks编程 use开头的方法就是 hooks编程
const route = useRoute()
const id = route.params.id;
const post = ref({})

onMounted(async ()=>{
    // post.value = await getPostsById(id)
    const data = await getPostsById(id)
    if(data){
        post.value = data
    }
    const recommends = await getRecommendPosts(id)
})

</script>

<style lang="css" scoped>

</style>